<script setup>
import WorkTodoItemMenu  from './work-todo-item-menu.vue';

const props = defineProps({
  menu: { type: Array },
});

const { menu } = toRefs(props);
</script>

<template>
  <template v-for="(m, _index) in menu" :key="_index">
    <el-sub-menu class="sub-menu" v-if="m.hasChild" :index="m.title">
      <template #title>
        <div class="sub-menu-title">
          <iconify-icon
            class="icon"
            :icon="m.icon"
            :width="14"
            :height="14"
            />
          <div class="title">
            <div class="title__label" :title="m.title">{{ m.title }}</div>
            <basic-badge class="title__badge" :value="m.badge?.value"></basic-badge>
          </div>
        </div>
      </template>
      <work-todo-item-menu :menu="m.children ?? []"></work-todo-item-menu>
    </el-sub-menu>
    <el-menu-item v-else :index="m.title">
      <template #title>
        <div class="menu-title">
          <iconify-icon
            class="icon"
            :icon="m.icon"
            :width="14"
            :height="14"
            />
          <div class="title">
            <div class="title__label" :title="m.title">{{ m.title }}</div>
            <basic-badge class="title__badge" :value="m.badge?.value"></basic-badge>
          </div>
        </div>
      </template>
    </el-menu-item>
  </template>
</template>

<style lang="scss" scoped>
@import '@/assets/style/common.scss';

@mixin menu-title {
  display: flex;
}
@mixin title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@mixin title__label {
  margin-left: 8px;
  line-height: 1.5;
  @include ellipsis();
}
@mixin title__badge {
  margin-left: 8px;
}
@mixin icon {
  height: 1.3em;
  line-height: 1.3em;
}

.sub-menu {
  .sub-menu-title {
    @include menu-title();

    .title {
      @include title();

      .title__label {
        width: 155px;
        @include title__label();
      }

      .title__badge {
        @include title__badge();
      }
    }

    .icon {
      @include icon();
    }
  }

  .menu-title {
    @include menu-title();
    .title {
      @include title();

      .title__label {
        width: 135px;
        @include title__label();
      }

      .title__badge {
        @include title__badge();
      }
    }

    .icon {
      @include icon();
    }
  }
}
</style>
